<template>
  <div id="my">
    <!-- 设置按钮 -->
    <div class="top">
      <van-icon name="setting-o" @click="toSitting" />
    </div>
    <!-- 用户中心 -->
    <div class="userMsg">
      <div class="userIcon">
        <img
          src="https://tsyx-rights-and-interests.oss-cn-hangzhou.aliyuncs.com/icon/petroleum.png"
          alt=""
        />
      </div>
      <div class="userName" v-if="isLogin">
        <p class="name">{{ userMsg.nickName }}</p>
        <p class="tel">电话 :{{ userMsg.phoneNumber }}</p>
      </div>
      <div class="userName login" v-else @click="toLogin">
        <p class="name">游客</p>
      </div>
      <!-- 升级会员标 -->
      <div class="toVip" v-if="!isVip" @click="toVipH5Msg">
        <img
          src="https://tsyx-rights-and-interests.oss-cn-hangzhou.aliyuncs.com/icon/toVip.png"
          alt=""
        />
        升级会员
        <div class="icon-v-right"></div>
      </div>
      <div class="vipMsg" v-if="!isVip">升级会员享受更多权益</div>
      <!--  是认证会员还是非认证会员 -->
      <div class="isVipNo" v-if="isVip">
        <img
          src="https://tsyx-rights-and-interests.oss-cn-hangzhou.aliyuncs.com/icon/weirenzheng.png"
          v-if="userMsg.userType == 1"
          alt=""
          @click="qurenzheng"
        />
        <img
          src="https://tsyx-rights-and-interests.oss-cn-hangzhou.aliyuncs.com/icon/yirenzheng.png"
          v-else
          alt=""
        />
      </div>
      <!-- 中石油会员标 -->
      <div class="isVipNo zsyVip" v-if="isVip">
        <img
          src="https://tsyx-rights-and-interests.oss-cn-hangzhou.aliyuncs.com/icon/isVip.png"
          alt=""
        />
      </div>
      <div class="cardBox">
        <ul>
          <li>
            <img
              src="https://tsyx-rights-and-interests.oss-cn-hangzhou.aliyuncs.com/icon/card.png"
              alt=""
            />
            <p>中石油<br />电子券</p>
            <div class="msgborder">
              <img
                src="https://tsyx-rights-and-interests.oss-cn-hangzhou.aliyuncs.com/icon/msgBorder.png"
                alt=""
              />
            </div>
          </li>
          <li @click="toCard('2')">
            <h3>{{ cardList.unused }}</h3>
            <h5>未使用</h5>
          </li>
          <li @click="toCard('3')">
            <h3>{{ cardList.used }}</h3>
            <h5>已使用</h5>
          </li>
          <li @click="toCard('5')">
            <h3>{{ cardList.expired }}</h3>
            <h5>已过期</h5>
          </li>
        </ul>
      </div>
    </div>
    <!-- 会员banner -->
    <img
      src="https://tsyx-rights-and-interests.oss-cn-hangzhou.aliyuncs.com/img/vipBanner.png"
      alt=""
      class="vipBanner"
      v-if="!isVip"
      @click="toVipH5Msg"
    />
    <!-- 我的订单 -->
    <div class="myorder">
      <div class="title">我的订单</div>
      <div class="cardBox orderBox">
        <ul>
          <li @click="toOrder(0)">
            <img
              src="https://tsyx-rights-and-interests.oss-cn-hangzhou.aliyuncs.com/icon/allOrder.png"
              alt=""
            />
            <p>全部订单</p>
            <div class="msgborder">
              <img
                src="https://tsyx-rights-and-interests.oss-cn-hangzhou.aliyuncs.com/icon/msgBorder.png"
                alt=""
              />
            </div>
          </li>
          <li @click="toOrder(1)">
            <img
              src="https://tsyx-rights-and-interests.oss-cn-hangzhou.aliyuncs.com/icon/noMoneyOrder.png"
              alt=""
            />
            <h5>待付款</h5>
          </li>
          <li @click="toOrder(2)">
            <img
              src="https://tsyx-rights-and-interests.oss-cn-hangzhou.aliyuncs.com/icon/waitOrder.png"
              alt=""
            />
            <h5>处理中</h5>
          </li>
          <li @click="toOrder(3)">
            <img
              src="https://tsyx-rights-and-interests.oss-cn-hangzhou.aliyuncs.com/icon/okOrder.png"
              alt=""
            />
            <h5>已完成</h5>
          </li>
          <li @click="toOrder(4)">
            <img
              src="https://tsyx-rights-and-interests.oss-cn-hangzhou.aliyuncs.com/icon/falseOrder.png"
              alt=""
            />
            <h5>已取消</h5>
          </li>
        </ul>
      </div>
    </div>
    <!-- 客服中心 -->
    <div class="cardBox helpbox">
      <ul>
        <li @click="toourPage(0)">
          <img
            src="https://tsyx-rights-and-interests.oss-cn-hangzhou.aliyuncs.com/icon/kefu.png"
            alt=""
          />
          <p>官方客服</p>
        </li>
        <li @click="toourPage(1)">
          <img
            src="https://tsyx-rights-and-interests.oss-cn-hangzhou.aliyuncs.com/icon/help.png"
            alt=""
          />
          <h5>帮助中心</h5>
        </li>
        <li @click="toourPage(2)">
          <img
            src="https://tsyx-rights-and-interests.oss-cn-hangzhou.aliyuncs.com/icon/aboutus.png"
            alt=""
          />
          <h5>关于我们</h5>
        </li>
        <li @click="toourPage(3)">
          <img
            src="https://tsyx-rights-and-interests.oss-cn-hangzhou.aliyuncs.com/icon/cooperation.png"
            alt=""
          />
          <h5>商务合作</h5>
        </li>
        <li @click="toourPage(4)">
          <img
            src="https://tsyx-rights-and-interests.oss-cn-hangzhou.aliyuncs.com/icon/agreement.png"
            alt=""
          />
          <h5>用户协议</h5>
        </li>
      </ul>
    </div>
    <!-- 意见反馈 -->
    <div class="feedback">
      <h3>
        意见反馈
        <span>{{ feedBackNum }}/200</span>
      </h3>
      <textarea
        name=""
        id=""
        cols="30"
        rows="10"
        v-model="feedBackMsg"
        placeholder="10字以上问题与建议描述…"
        class="feedBackInput"
      ></textarea>
      <input
        type="button"
        class="feedBackBtn"
        value="取消"
        @click="clearFeedBack"
      />
      <input
        type="button"
        class="feedBackBtn tijiao"
        value="提交"
        @click="getFeedBack"
      />
    </div>
  </div>
</template>

<script>
import { Toast, Dialog } from "vant";
import req from "@/utils/index";
export default {
  data() {
    return {
      cardList: {
        unused: 0,
        expired: 0,
        used: 0,
      },
      feedBackNum: 0,
      feedBackMsg: "",
      userMsg: {
        userType: 0,
      },
      isLogin: true,
      isVip: this.$store.state.isright,
    };
  },
  methods: {
    // 去设置
    toSitting() {
      if (!this.isLogin) {
        this.$router.push({
          name: "getUser",
          query: {
            spid: 'sitting'
          }
          
        });
        return;
      }
      this.$router.push({
        name: "userSitting",
      });
    },
    // 去电子券
    toCard(id) {
      if (!this.isLogin) {
        this.$router.push({
          name: "getUser",
          query: {
            spid: 'my'
          }
        });
        return;
      }
      if (!this.isVip) {
        Dialog.confirm({
          message: "您的手机号还不是平台的会员， 是否要成为会员？",
        })
          .then(() => {
            // on confirm
            window.localStorage.setItem('whatBuy', 'vip')
            this.$router.push({
              name: "creatOrder",
              query: {
                goodsNo: window.localStorage.getItem("VipGoodsNo"),
                didPay: "noYet",
              },
            });
          })
          .catch(() => {
            // on cancel
          });
        return;
      }
      this.$store.state.myCardStatus = id;
      this.$router.push({
        name: "myCard",
        params: { id },
      });
    },
    // 订单
    toOrder(id) {
      if (!this.isLogin) {
        this.$router.push({
          name: "getUser",
          query: {
            spid: 'my'
          }
        });
        return;
      }
      if (!this.isVip) {
        Dialog.confirm({
          message: "您的手机号还不是平台的会员， 是否要成为会员？",
        })
          .then(() => {
            // on confirm
            window.localStorage.setItem('whatBuy', 'vip')
            this.$router.push({
              name: "creatOrder",
              query: {
                goodsNo: window.localStorage.getItem("VipGoodsNo"),
                didPay: "noYet",
              },
            });
          })
          .catch(() => {
            // on cancel
          });
        return;
      }
      this.$router.push({
        name: "order",
        params: { id },
      });
    },
    // 官方客服
    toourPage(id) {
      switch (id) {
        case 0:
          this.$router.push({name: 'tel'})
          break;
        case 1:
          this.$router.push({name: 'helpCore'})
          break;
        case 2:
          this.$router.push({name: 'tel'})
          break;
        case 3:
          this.$router.push({name: 'business'})
          break;
        case 4:
          this.$router.push({name: 'userAgreement'})
          break;
      }
    },
    // 反馈意见
    clearFeedBack() {
      this.feedBackMsg = "";
      this.feedBackNum = 0;
    },
    // 反馈意见
    getFeedBack() {
      if (this.feedBackMsg.length < 10) {
        Toast("反馈内容字数必须大于10字");
        return;
      }
      if (!this.isLogin) {
        this.$router.push({
          name: "getUser",
          query: {
            spid: 'my'
          }
        });
        return;
      }
      req("post", "/qyHome/feedback", {
        mobile: this.userMsg.phoneNumber,
        content: this.feedBackMsg,
      }).then((res) => {
        // console.log(res)
        if (res.rspCode == "000000") {
          Toast("反馈成功，感谢您的宝贵建议！");
          this.feedBackMsg = "";
        }
      });
    },
    // 去登录
    toLogin() {
      // this.$router.push({
      //   name: "getUser",
      // });
    },
    // 办会员
    toVipH5Msg() {
      // if (!this.isLogin) {
      //   Toast("请先登录喔~");
      //   return;
      // }
      this.$router.push({
        name: "poster",
      });
    },
    // 非认证会员去认证
    qurenzheng() {
      this.$router.push({
        name: "upload",
      });
    },
  },
  created() {
    this.userMsg = JSON.parse(window.localStorage.getItem("userMsg"));
    if (window.localStorage.getItem("phone")) {
      req("get", `/qy/user/info`, {}).then((res) => {
        // console.log(res);
        if (res.rspCode == "000000") {
          this.isLogin = true;
          this.userMsg = res.data;
          window.localStorage.setItem("userMsg", JSON.stringify(res.data));
          if (res.data.userType == 0) {
            this.$store.state.isright = false;
          } else {
            this.$store.state.isright = true;
          }
        } else {
          this.$store.state.isright = false;
          this.isLogin = false;
        }
      });
      req("get", "/qy/user/coupon/num?type=0", {}).then((res) => {
        if (res.rspCode == "000000") {
          // console.log(res)
          this.cardList = res.data;
        }
      });
    } else {
      this.isLogin = false;
      this.$store.state.isright = false;
    }
  },
  watch: {
    // 监听意见反馈字数
    feedBackMsg(value, oldvalue) {
      if (value.length > 200) {
        this.feedBackMsg = oldvalue;
        return;
      }
      this.feedBackNum = value.length;
    },
  },
};
</script>

<style lang='scss' scoped>
#my {
  background-image: url(https://tsyx-rights-and-interests.oss-cn-hangzhou.aliyuncs.com/background/redBG.png);
  background-color: #f7f8fa;
  background-size: 100%;
  background-repeat: no-repeat;
  width: 100%;
  padding-bottom: 3rem;
  padding-top: 0.2rem;
  text-align: center;
}
// 设置按钮
.top {
  color: #fff;
  font-size: 0.6rem;
  text-align: right;
  padding: 0rem 0.3rem 0 0;
}
// 用户框
.userMsg {
  position: relative;
  width: 90%;
  height: 4.8rem;
  background-color: #ffffff;
  margin: 0.6rem auto 0.3rem;
  border-radius: 0.2rem;
  .userIcon {
    position: absolute;
    left: 0.1rem;
    top: 0.3rem;
    width: 20%;
    img {
      width: 100%;
    }
  }
  .userName {
    position: absolute;
    left: 20%;
    top: 0.3rem;
    text-align: left;
    width: 35%;
    overflow: hidden;
    p {
      margin: 0;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
    }
    .name {
      font-size: 0.5rem;
      margin-top: 0.2rem;
    }
    .tel {
      display: inline-block;
      font-size: 0.3rem;
      border-radius: 0.3rem;
      background-color: #f1f2f3;
      color: #999999;
      padding: 0 0.1rem;
    }
  }

  .login {
    top: 0.6rem;
  }
  .toVip {
    position: absolute;
    right: 0.3rem;
    top: 0.5rem;
    width: 30%;
    height: 1rem;
    // padding: .2rem 0;
    background: linear-gradient(90deg, #f3dfb1 11%, #f3dfb1 11%, #e6c27c);
    border-radius: 0.5rem;
    line-height: 1rem;
    text-align: center;
    padding-left: 0.2rem;
    box-sizing: border-box;
    img {
      position: absolute;
      left: 0.2rem;
      top: 50%;
      transform: translateY(-50%);
      width: 20%;
      margin-right: 3rem;
    }
    .icon-v-right {
      position: absolute;
      right: 0.4rem;
      top: 50%;
      width: 0.15rem;
      height: 0.15rem;
      border: 1px solid #000;
      border-width: 1px 1px 0 0;
      transform: rotate(45deg) translateY(-50%);
    }
  }

  .vipMsg {
    position: absolute;
    right: 0.2rem;
    top: 1.6rem;
    color: #cccccc;
  }
  .isVipNo {
    position: absolute;
    left: 55%;
    top: 0.6rem;
    width: 15%;
    height: 0.5rem;
    img {
      width: 100%;
    }
  }
  .zsyVip {
    left: auto;
    right: 0.3rem;
    width: 20%;
    top: 0.55rem;
  }
}
.cardBox {
  position: absolute;
  left: 50%;
  bottom: 0.2rem;
  width: 90%;
  background: linear-gradient(180deg, #f1f3f8, #ffffff);
  border-radius: 12px;
  transform: translateX(-50%);
  overflow: hidden;
  ul {
    overflow: hidden;
    height: 100%;
    li {
      position: relative;
      float: left;
      height: 100%;
      width: 24%;
      text-align: center;
      padding: 0.2rem 0;
      box-sizing: border-box;
      color: #333333;
      img {
        width: 50%;
      }
      p {
        padding: 0;
        margin: 0;
      }
      .msgborder {
        position: absolute;
        width: 0.2rem;
        height: 70%;
        right: -0.1rem;
        top: 50%;
        transform: translateY(-50%);
        border-left: 1px dashed #000;
        img {
          height: 100%;
          margin: 0;
          padding: 0;
        }
      }
      h3,
      h5 {
        margin: 0;
        padding: 0;
        color: #333;
      }
      h3 {
        font-size: 0.5rem;
        padding-top: 0.3rem;
      }
      h5 {
        margin-top: 0.2rem;
        font-weight: 400;
      }
    }
  }
}

// 升级会员
.vipBanner {
  width: 90%;
  margin: 0.3rem 0;
}

// 我的订单
.myorder {
  position: relative;
  width: 90%;
  height: 3rem;
  background-color: #fff;
  margin: auto;
  border-radius: 10px;
  box-shadow: 0px 10px 35px 0px rgba(198, 198, 198, 0.36);
  .title {
    text-align: left;
    padding: 0.2rem 0 0 0.3rem;
    box-sizing: border-box;
    font-size: 0.45rem;
    font-weight: 700;
    color: #333333;
  }
  .orderBox {
    border-radius: 0;
    width: 100%;
    background: none;
    li {
      width: 20%;
      h5 {
        margin: 0;
      }
      .msgborder {
        border: none;
      }
    }
  }
}

// 客服帮助中心
.helpbox {
  position: relative;
  width: 90%;
  margin: 0.7rem 0 0.7rem 0;
  border-radius: 0;
  background: #fff;
  box-shadow: 0px 10px 35px 0px rgba(198, 198, 198, 0.36);
  ul {
    li {
      width: 20%;
      h5 {
        margin: 0;
      }
    }
  }
}
// 意见反馈
.feedback {
  width: 90%;
  margin: auto;
  background-color: #fff;
  padding-bottom: 0.3rem;
  box-shadow: 0px 10px 35px 0px rgba(198, 198, 198, 0.36);
  h3 {
    text-align: left;
    padding: 0.3rem;
    margin: 0;
    span {
      float: right;
      color: #ccc;
      font-size: 0.15rem;
      font-weight: 400;
    }
  }
  .feedBackInput {
    width: 100%;
    box-sizing: border-box;
    border: none;
    resize: none;
    padding: 0 0.1rem 0 0.3rem;
  }
  .feedBackBtn {
    background: #f5d1d3;
    color: #ce1b23;
    padding: 0.1rem 1rem;
    border: none;
    border-radius: 15px;
  }
  .tijiao {
    margin-left: 1rem;
    background: #ce1b23;
    color: #fff;
  }
}
</style>